<template>
  <div class="bodys">
    <div class="bjtp">
      <img src="../../assets/zy/zs.png" alt="">
      <!-- 背景图片三个圆球 -->
      <img src="../../assets/zy/zx.png" alt="">
      <img src="../../assets/zy/ys.png" alt="">
    </div>
    <div class="centers">
      <div class="forms">
        <div class="title">
          <img src="../../assets/zy/u24.png" alt="">
          电商后台管理
        </div>
        <el-form ref="fromLogin" :model="fromLogin" :rules="rules">
          <el-form-item prop="mobile">
            <el-input v-model="fromLogin.mobile" placeholder="账号">
              <template #prefix>
                <i
                  class="el-input__icon el-icon-user"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="fromLogin.password" type="password" placeholder="密码">
              <template #prefix>
                <i
                  class="el-input__icon el-icon-lock"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="yzm">
            <el-input v-model="fromLogin.yzm" placeholder="验证码">
              <template #prefix>
                <i
                  class="el-input__icon el-icon-s-claim"
                />
              </template>
              <template #suffix>
                <div class="yzmstyle">9 5 2 7</div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="el-bottom" type="primary" @click="clickInit">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      fromLogin: {
        mobile: '',
        password: '',
        yzm: ''
      },
      rules: {
        mobile: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { pattern: /^1[3~8]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度6-16', trigger: 'blur' }
        ],
        yzm: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { pattern: /^9527$/, message: '验证码错误', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    clickInit() {
      this.$refs.fromLogin.validate(async(isOK) => {
        if (isOK) {
          await this.$store.dispatch('user/login', this.fromLogin)
          this.$router.push({ path: '/' })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bodys {
  height: 100vh;
  position: relative;
  background: linear-gradient(180deg, #3fccfd 0%, #996cfb 100%);
 .bjtp{
  width: 100%;
  height: 100%;
  display: block;
  img{
      position: absolute;
    &:nth-child(1){
      left: 50px;
      top:50px;
      opacity: 0.5;
    }
    &:nth-child(2){
      left: -220px;
      bottom: -320px
    }
    &:nth-child(3){
      right: -110px;
      top:-210px
    }

  }
 }
  .centers {
    width: 900px;
    height: 403px;
    position: absolute;
    left: 250px;
    top: 130px;
    background: url('../../assets/zy/u25.png') no-repeat 0px -10px;

    /* background-size: 50%; */
    .forms {
      background: white;
      width: 400px;
      height: 400px;
      position: absolute;
      right: 0px;
      box-sizing: border-box;
      padding: 50px;
      border-radius: 10px;

      .title {
        width: 100%;
        margin-bottom: 20px;
        font-family: '楷体 Regular';
        font-weight: 700;
        font-style: normal;
        font-size: 32px;
        text-align: center;
        color: rgb(67, 141, 238);
        display: flex;
        line-height: normal;

        img {
          margin-right: 20px;
        }
      }

      .el-input__icon {
        width: 100%;
        font-size: 22px;
        // background: url('../../assets/zy/u21.png') no-repeat 5px 0px;
      }

      .el-button {
        width: 100%;
        height: 50px;
        background-color: #3fccfd;
        color: white;
        text-align: center;
        border-radius: 5px;
      }
      .yzmstyle{
        width: 150px;
        height: 100%;
        background-color: darkgray;
        border-radius: 5px;
        position: relative;
        color: white;
        font-size: 32px;
        right: -5px;
      }
    }
  }
}
</style>
